<template>
    <div class="body">
        <navbar class="navbar"></navbar>
        <div class="myInfo">
            <div class="info" @click="$router.push({path:'/likes'})">
                <span class="iconfont icon-dianzan"></span>
                <span class="likeCheck" v-if="likeCheck>0">{{likeCheck}}</span>
                <p>收到的赞</p>
            </div>
            <div class="info">
                <span class="iconfont icon-wenda"></span>
                <p>回复我的</p>
            </div>
            <div class="info">
                <span class="iconfont icon-gonggao"></span>
                <p>系统通知</p>
            </div>
        </div>
        <div class="chatHistory">
            <user-row :userMessage="email" @click="" v-for="email in emails"></user-row>
        </div>
    </div>
</template>

<script>
    import userRow from '../components/UserComponents/user-row';
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import Navbar from "../components/common/navbar";

    export default {
        computed: {
            ...mapState(['emails', "likeCheck"])
        },
        components: {
            Navbar,
            userRow
        },
        data() {
            return {}
        },
        methods: {},
        mounted() {


        }
    }
</script>

<style lang="scss">
    .body {
        .chatHistory {
            background: white;
            margin-top: 3.042vw;
        }

        .navbar {
            background: white;

        }

        .myInfo {

            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .info {
                display: flex;
                flex-direction: column;
                align-items: center;

                .icon-wenda {
                    color: #42b983;
                    font-size: 20px;
                }

                .icon-dianzan {
                    color: #fb7a9f;
                    font-size: 20px;
                }

                .icon-gonggao {
                    color: #0077aa;
                    font-size: 20px;
                }

                p {
                    color: #7a7a7a;
                    font-size: 2px;
                }

                justify-content: center;
            }
        }
    }
    .likeCheck{
        position: absolute;
        font-size: 2px;
        padding: 1px;
        color: white;
        line-height: 12px;
        text-align: center;
        background: red;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        top: 14vw;
        left: 19vw;
    }
</style>